<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="header" ref="lableGroup" :class="chatMore ? 'chat-group-mask' : 'chat-group'">
		  <view :class="chatMore ? 'chat-group-con-mask' : 'chat-group-con'">
		    <view class="lable-group" :class="isactive == item.id ? 'lable-group-active' : 'lable-group'" v-for="(item, index) in groupList" :key="item.id" @click="getLable(item, index)" :ref="item.id">
		      <text class="lable">{{ item.groupName }}</text>
		    </view>
		    <text class="last-lable" @click="showPopup" v-if="hasMoreBtn && showMore">
		      <text class="iconfont iconfangxiangjiantou" :class="chatMore ? 'directionTop' : ''"></text>
		    </text>
		  </view>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="maskShow" @click="showPopup"></view>
	</view>
</template>

<script>
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				isactive: 0, //点击分组标签
				chatMore: false,
				maskShow: false, //遮罩是否
				hasMoreBtn: false, // 是否超出两行
				showMore: false, // 是否
				groupList: [1,23222,6665,111,55,4645566,231,1,2,12655566565,1,23232,4], //话术分组标签列表
				groupListBack: [], //备份
				groupIdList: [], //备份
			}
		},
		onLoad() {
		
		},
		methods:{
			// 计算有几行标签 classNa 父容器样式名称
			toggleHistoryData () {
			  let idx = 0;
			  let count = 0;
			  let iIndex0 = 0;
			  this.$nextTick(() => {
				let ulChid = document.querySelector(".chat-group-con").childNodes; //获取父容器所有子节点
				console.log("ulChid", ulChid);
				ulChid.forEach((i, index) => {
				  if (index === 0) {
					iIndex0 = i.offsetLeft;
				  }
				  if (i.offsetLeft === iIndex0) {
					count++;
					if (count === 3) {
					  idx = index - 1;
					  this.hasMoreBtn = true;
					  this.showMore = true;
					}
				  }
				});
				// 超过2行截断数据
				if (idx > 0) {
				  this.groupList = [...new Set(this.groupListBack)].slice(0, idx);
				}
			  });
			},
	
		}
	}
</script>

<style lang="scss" scoped>
.lable-group {
	height: 28px;
	line-height: 28px;
	border-radius: 4px;
	border: 1px solid #dfdfdf;
	margin-right: 10px;
	margin-bottom: 11px;
	background: #ffffff;
	overflow: hidden;
	.lable {
		padding: 0 8px;
		font-size: 14px;
		color: #131313;
		overflow: hidden;
		cursor: pointer;
	}
}
</style>